<template>
<div class="model-settings">
    <div class="header">

        <div style="background-color: white;border-radius: 20px;">
            <div style="color: #04c1a5;font-size: large;">鼾声模型训练结果展示</div>
              <div id="myEcharts" style="width:40vw;height:30vh;margin-top:5vh"></div>
        </div>
    </div>
    <div class="content">
        <el-row align>
            <el-col >
              <el-descriptions
              :column="1"
              :size="size"
              direction="vertical"
              >
              <el-descriptions-item >
                <el-row justify>
                    <el-col :span="6" style="text-align:center">               
                    </el-col>
                    <el-col :span="6" style="text-align:center">               
                         <el-tag style="font-size: larger;font-weight: 700;background-color:#edf7f6;color:#4CAF50;" >模型名称</el-tag>
                    </el-col>
                    <el-col :span="6" style="text-align:center">
                      <el-select v-model="state" placeholder="请选择用户状态">
                        <el-option
                          v-for="item in stateData"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-col>
                </el-row>
              </el-descriptions-item>

              </el-descriptions>
            </el-col>  
            <el-col style="text-align: center; margin-top:-1vh;">
              <el-divider >
                <div style="font-size:medium;font-weight: 600;">更改模型参数</div>
              </el-divider>
            </el-col>
            <el-col >
              <el-descriptions
              :column="1"
              :size="size"
              direction="vertical"
              >
              <el-descriptions-item >
                <el-row justify>
                    <el-col :span="6" style="text-align:center">               
                    </el-col>
                    <el-col :span="6" style="text-align:center;">               
                         <el-tag size="small" style="font-size: larger;font-weight: 700;background-color:#edf7f6;color:#4CAF50;" >算法选择</el-tag>
                    </el-col>
                    <el-col :span="6" style="text-align:center">      
                      <el-select
                        v-model="value"
                        clearable
                        placeholder="Select"
                        style="width: 16vh"
                    >
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                      </el-select>
                    </el-col>
                </el-row>
              </el-descriptions-item>
              <el-descriptions-item >
                <el-row justify>
                    <el-col :span="6" style="text-align:center">               
                    </el-col>
                    <el-col :span="6" style="text-align:center">               
                         <el-tag size="small" 
                         style="font-size: larger;
                         font-weight: 700;
                         padding: 1vh;
                         background-color:#edf7f6;color:#4CAF50;
                         " >池化层选择</el-tag>
                    </el-col>
                    <el-col :span="6" style="text-align:center">      
                      <el-select
                        v-model="value"
                        clearable
                        placeholder="Select"
                        style="width: 16vh"
                    >
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                      </el-select>
                  </el-col>
              </el-row>
              </el-descriptions-item>
              <el-descriptions-item >
                <el-row justify>
                    <el-col :span="6" style="text-align:center">               
                    </el-col>
                    <el-col :span="6" style="text-align:center">               
                         <el-tag size="small" style="font-size: larger;font-weight: 700;background-color:#edf7f6;color:#4CAF50;">优化算法选择</el-tag>
                    </el-col>
                    <el-col :span="12" style=""> 
                        <div class="checkbox-group">
                            <el-checkbox-group v-model="selectedModels">
                            <el-checkbox label="Model 1"></el-checkbox>
                            <el-checkbox label="Model 2"></el-checkbox>
                            <el-checkbox label="Model 3"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-col>
                </el-row>
              </el-descriptions-item>
              <el-descriptions-item >
                <el-row justify>
                    <el-col :span="6" style="text-align:center">               
                    </el-col>
                    <el-col :span="6" style="text-align:center">               
                         <el-tag size="small" style="font-size: larger;font-weight: 700;background-color:#edf7f6;color:#4CAF50;">xx占比率</el-tag>
                    </el-col>
                    <el-col :span="12" style=""> 
                        <el-row :model="formInline" style="height: 2vh;width: 32vh;display: flex;align-items: center;">
                          <el-col :span="3"></el-col>
                        <el-col :span="9" style="display: flex;align-items: center;justify-content: center;">
                            <el-input size="medium" v-model="formData.rate" placeholder="请输入所属人姓名或手机号"></el-input>
                        </el-col>
                        <el-col :span="12" style="display: flex;">
                            <el-button size="medium" style="background-color:#04c1a5;color:#fff">
                                <font-awesome-icon icon="fas fa-ban" />
                            <!-- <span style="margin-left:1vh">查询</span> -->
                            </el-button>
                        </el-col>
                        </el-row>
                    </el-col>
                </el-row>
              </el-descriptions-item>
            </el-descriptions>
            </el-col>  
        </el-row>
    </div>
    <div class="footer">
      <el-button type="success" @click="saveSettings">保存设置</el-button>
    </div>
  </div>
</template>
<script setup>

import { ref,reactive,getCurrentInstance,nextTick,toRefs,onMounted,onUnmounted } from 'vue'
const{proxy}=getCurrentInstance();
const selectedModels = ref([])
const showParameter1 = ref(false)
const showParameter2 = ref(false)
const showParameter3 = ref(false)
const state=ref("xx神经网络模型1")
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
const stateData = ref([
  { label: "xx神经网络模型1", value: "1" },
  { label: "xx神经网络模型2", value: "2" },
])

const formData= ref({
    rate: 0.01,
})
const saveSettings = () => {}

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
import * as echarts from "echarts";
const snoreComment = ref('')
const width = ref("20vh");
const height = ref("20vh");
const chartInstance = ref(null);
const queryInfo = reactive({
      query: '', // 查询参数
      pagenum: 1, // 当前页码
      pagesize: 2 // 每页显示条数
    });
// 初始化图表
const initChart = () => {
  // 基于准备好的dom，初始化echarts实例
  chartInstance.value = echarts.init(document.getElementById("myEcharts"),"wonderland");
  chartInstance.value.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      top: '5%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['Epoch 1', 'Epoch 2', 'Epoch 3', 'Epoch 4', 'Epoch 5', 'Epoch 6', 'Epoch 7', 'Epoch 8', 'Epoch 9'],  // 替换为训练模型的 Epoch 数据
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false
      }
    },
    series: [{
      type: 'line',
      smooth: true,
      data: [0.8, 0.85, 0.9, 0.88, 0.92, 0.78, 0.86, 0.88, 0.95]  // 替换为和鼾声训练模型效果有关的数据（例如准确率、损失等）
    }]
  });

  // 大小自适应窗口大小变化
  window.onresize = () => {
    chartInstance.value.resize();
  };
};
onMounted(() => {
  initChart();
  // formData.state = StatusOptions[0]
});
onUnmounted(() => {
  // 销毁图表
  if (chartInstance.value) {
    chartInstance.value.dispose();
  }
});
</script>
<style scoped>

.model-settings {
  max-width: 800px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  border: 1px solid #ccc;
}

.content {
    background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
}

.checkbox-group {
  /* margin-bottom: 20px; */
}

.parameters h4 {
  margin-bottom: 10px;
}

.footer {
  text-align: right;
}
</style>